<!-- 修改密码 -->
<template>
  <div>
    <nil-page :title="`修改密码`" icon="IceDrink">
      <div class="topTip">
        <el-alert
          title="修改成功后会自动退出当前登录！"
          type="warning"
          :closable="false"
        />
      </div>

      <el-form
        ref="changePassForm"
        :model="oneChangePassData"
        :rules="rules"
        status-icon
        label-width="120px"
      >
        <el-form-item label="当前密码" prop="oldPass">
          <el-input
            :disabled="loading"
            v-model="oneChangePassData.oldPass"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input
            :disabled="loading"
            v-model="oneChangePassData.newPass"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repeatPass">
          <el-input
            :disabled="loading"
            v-model="oneChangePassData.repeatPass"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="doChangePass(changePassForm)"
            >修改密码</el-button
          >
          <el-button type="" @click="redo(changePassForm)">重置</el-button>
        </el-form-item>
      </el-form>
    </nil-page>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import http from "@/http/api";
import md5 from "js-md5";
import { ADMIN_USER_PASS } from "@/http/uri";

const oneChangePassData = reactive({
  oldPass: "",
  newPass: "",
  repeatPass: "",
});
const repeatPassCheck = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== oneChangePassData.newPass) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};
const rules = {
  oldPass: [
    {
      required: true,
      message: "请输入当前密码",
      trigger: "blur",
    },
  ],
  newPass: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur",
    },
  ],
  repeatPass: [
    {
      required: true,
      validator: repeatPassCheck,
      trigger: "blur",
    },
  ],
};
const changePassForm = ref();
const loading = ref(false);
function redo(v) {
  v.resetFields();
}
const userStore = useUserStore();
const router = useRouter();
function doChangePass(v) {
  v.validate((valid) => {
    if (valid) {
      let upData = {
        uid: userStore.info.id ?? "",
        oldPass: md5(oneChangePassData.oldPass),
        newPass: md5(oneChangePassData.newPass),
        repeatPass: md5(oneChangePassData.repeatPass),
      };
      loading.value = true;
      http
        .POST(ADMIN_USER_PASS, upData)
        .then((res) => {
          if (res.success) {
            ElMessage({
              type: "success",
              message: "修改成功",
            });
            userStore.logout().then(() => {
              nextTick(() => {
                router.push({ name: "login" });
              });
            });
          } else {
            ElMessage({
              type: "error",
              message: res.message,
            });
          }
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
}
</script>

<style lang="scss" scoped>
.topTip {
  margin-bottom: 20px;
}
</style>
